// src/components/createAccount/CreateAccountHeader.tsx

import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { FaArrowLeft, FaUserPlus } from 'react-icons/fa';

const CreateAccountHeader = () => {
  const [isSmallScreen, setIsSmallScreen] = useState(false);
  const navigate = useNavigate();

  useEffect(() => {
    const checkScreenSize = () => setIsSmallScreen(window.innerWidth < 640);
    checkScreenSize();
    window.addEventListener('resize', checkScreenSize);
    return () => window.removeEventListener('resize', checkScreenSize);
  }, []);

  const handleBackClick = () => {
    navigate(-1);
  };

  return (
    <header className="mb-8 text-center relative">
      {/* Back button */}
      <button
        onClick={handleBackClick}
        className="absolute left-0 top-2 flex items-center gap-2 px-3 py-2 text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-slate-700 rounded-xl transition-all duration-200 ease-in-out group"
        aria-label="Go back"
      >
        <FaArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform duration-200" />
        <span className="text-sm font-medium hidden sm:inline">Back</span>
      </button>

      <div className="mb-6">
        <div className="w-20 h-20 mx-auto mb-6 bg-blue-600 dark:bg-cyan-700 rounded-3xl flex items-center justify-center shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out hover:scale-105">
          <FaUserPlus className="w-10 h-10 text-white" />
        </div>
        <h1
          id="register-header"
          className={`font-bold text-gray-900 dark:text-white mb-3 ${isSmallScreen ? 'text-2xl' : 'text-3xl'}`}
        >
          Create Account
        </h1>
        <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed max-w-sm mx-auto">
          Fill in the details below to create your new account and get started
        </p>
      </div>
    </header>
  );
};

export default CreateAccountHeader;